// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
// import axios from 'axios'
// import iview from 'iview'
// import 'iview/dist/styles/iview.css';

// Vue.use(iview);
// console.log(axios)
// Vue.prototype.$http = axios

// Vue.use(axios)
Vue.config.productionTip = false
Vue.directive('jspang',function(el,binding,vnode){
        el.style='color:'+binding.value.color;
});
/* eslint-disable no-new */
 // var authorExtend = Vue.extend({
 //           template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
 //           data:function(){
 //               return{
 //                   authorName:'JSPang',
 //                   authorUrl:'http://www.jspang.com'
 //               }
 //           }
 //       });
 // new authorExtend().$mount('author');
 // 
 // 
 // 全局的过滤器
  Vue.filter('capitalize1', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
 //   vue.extend 用法之一
	var democomp = Vue.extend({
 	template:"<div><h1 ref = 'tit'>{{title}}</h1><div @click= 'linkTo'><a :href='adreive'>{{content}}</a></div></div>",
 	data(){
 		return{
 			title:'vue.extend 练习',
            content:'点击我跳到百度',
            adreive:''
 		}
 	},
 	methods:{
 		linkTo(){
          console.log(this.$refs.tit);
          this.$refs.tit.style.color = "red"
 		}
 	}
 }) 
Vue.component('democomp',democomp)

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    // 创建 kebabCase 风格的ID
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^\-|\-$)/g, '')

    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

Vue.component('many-p',{
	render:function(createElement){
       return createElement('div',
          Array.apply(null,{length:20}).map(function(){
          	return createElement('p','我爱我的故乡')
          })
       	)
	}
})
//这段代码是为了解决这个问题的
//vue2.0采用hash模式  如果列表页滑动到底部点击调到详情页面 那么一下子跳到详情页面
//可以采用这种方法解决问题
//你在返回的时候 页面不能保留你在之前浏览的位置  可以用另一种方法解决问题
// router.beforeEach(function(to,from,next) {
// 	window.scrollTo(0,0)
// 	next()
// })
// 
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
